<template>
    <div>
        <input placeholder="输入关键字搜索" v-model="keyWord" @keyup.enter="search">
        <table class="my-table">
            <thead>
                <tr>
                    <th>就诊日期</th>
                    <th>医生姓名</th>
                    <th>诊断结果</th>
                    <th>处方信息</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in records" :key="index">
                    <td>{{ item.date }}</td>
                    <td>{{item.doctor}}</td>
                    <td>{{item.diagnosis}}</td>
                    <td>{{item.prescription}}</td>
                    <td @click="open(item)">详情</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import Bus from '@/utils/EventBus';

export default {
    props: {
        records: {
            type: Array
        }
    },
    data(){
        return{
            keyWord:'',
        }
    },
    methods:{
        search(){
            this.$emit('search',this.keyWord)
        },
        async open(item){
            // console.log('即将发送的详情数据:', item);
           await Bus.$emit('sendMsg',item) // 先发送消息
            this.$emit('open') // 移动到发送消息之后
        }
    }
}
</script>

<style scoped>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>